import React, { useState, useRef, useEffect } from 'react';
import { Button, Space } from 'antd';
import { connect } from 'umi';
import TableDataBlock from '@/components/TableDataBlock';
import PopImgShow from '@/components/PopImgShow';
const SelelctModel = (props) => {
  const { list, visible = false, data, onClose, setFatherSelectedRowKeys, selectedKeys } = props;
  const { goodsSkuList = [] } = data;
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [stateColumns, setStateColumns] = useState([]);
  const { id, goodsType = 'offline' } = data;
  const rowSelection = {
    type: 'radio',
    hideSelectAll: true,
    onChange: (selectedRowKeys, selectedRows) => {
      setSelectedRowKeys(selectedRows);
    },
    selectedRowKeys: selectedRowKeys.map((item) => {
      return item.id.toString();
    }),
    preserveSelectedRowKeys: true,
  };
  const getColumns = [
    {
      title: '库存',
      dataIndex: 'stock',
    },
  ];
  useEffect(() => {
    const { propertyDesc = '' } = goodsSkuList[0] || {};
    let property = propertyDesc.split(',').map((item) => {
      return item.split(':')[0];
    });
    setStateColumns([
      ...property.map((item) => {
        return {
          title: item,
          dataIndex: item,
        };
      }),
      ...getColumns,
    ]);
  }, []);
  useEffect(() => {
    if (visible) {
      setSelectedRowKeys(
        selectedKeys
          .filter((item) => {
            return item.id === id;
          })
          .map((item) => {
            return { id: item.skuid };
          }),
      );
    } else {
      setSelectedRowKeys([]);
    }
  }, [visible]);
  return (
    <Space direction="vertical">
      <TableDataBlock
        rowSelection={rowSelection}
        columns={stateColumns}
        rowKey={(record) => `${record.id}`}
        list={goodsSkuList.map((item) => {
          let { propertyDesc } = item;
          let newList = propertyDesc.split(',').map((item) => {
            let info = item.split(':');
            return {
              [info[0]]: info[1],
            };
          });
          return {
            ...item,
            ...newList.reduce((val, i) => {
              return { ...val, ...i };
            }, {}),
          };
        })}
      ></TableDataBlock>
      <Space style={{ width: '100%', display: 'flex', justifyContent: 'flex-end' }} align={'end'}>
        <Button
          onClick={() => {
            onClose();
          }}
        >
          取消
        </Button>
        <Button
          onClick={() => {
            if (selectedRowKeys.length === 0) {
              onClose();
            } else {
              console.log(selectedRowKeys);
              setFatherSelectedRowKeys({
                ...data,
                skuid: selectedRowKeys[0].id,
                skuProperty: selectedRowKeys[0].propertyDesc,
              });
              onClose();
            }
          }}
          type="primary"
        >
          确定
        </Button>
      </Space>
    </Space>
  );
};

export default connect(({ selectionWindow, loading }) => ({
  list: selectionWindow.offlineGoodsList,
}))(SelelctModel);
